<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/statics/css/bootstrap.min.css">
    <link rel="stylesheet" href="/statics/libs/vue/element-ui-2.4.11/element-ui.css">
    <!-- import Vue before Element -->
    <script src="/statics/libs/vue/vue-v2.5.21.js"></script>
    <!-- import JavaScript -->
    <script src="/statics/libs/vue/element-ui-2.4.11/element-ui.js"></script>

</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-dropdown>
                <i class="el-icon-setting" style="margin-right: 15px"></i>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <span>王小虎</span>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu :default-openeds="['1', '3']">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-message"></i>导航一</template>
                        <el-submenu index="1-4">
                            <template slot="title">选项4</template>
                            <el-menu-item index="1-4-1">选项4-1</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
                    <el-tab-pane
                            :key="item.name"
                            v-for="(item, index) in editableTabs"
                            :label="item.title"
                            :name="item.name"
                    >
                        <iframe scrolling="yes" frameborder="0"
                                style="width:100%;height:100%;overflow:visible;background:#fff;"
                                src="modules/sys/dict.html"></iframe>
                    </el-tab-pane>
                </el-tabs>
                <!--<el-main>-->

                <!--</el-main>-->
                <el-footer height="30px"><span>v1.0.0</span></el-footer>
            </el-container>
        </el-container>
    </el-container>
</div>
<script>
    var item = {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
    }
    var vm = new Vue({
        el: '#app',
        data: {
            tableData: Array(20).fill(item),
            editableTabsValue: '2',
            editableTabs: [{
                title: 'Tab 1',
                name: '1',
                content: 'Tab 1 content'
            }, {
                title: 'Tab 2',
                name: '2',
                content: 'Tab 2 content'
            }],
            tabIndex: 2
        }
        ,methods: {
            handleTabsEdit(targetName, action) {
                if (action === 'add') {
                    let newTabName = ++this.tabIndex + '';
                    this.editableTabs.push({
                        title: 'New Tab',
                        name: newTabName,
                        content: 'New Tab content'
                    });
                    this.editableTabsValue = newTabName;
                }
                if (action === 'remove') {
                    let tabs = this.editableTabs;
                    let activeName = this.editableTabsValue;
                    if (activeName === targetName) {
                        tabs.forEach((tab, index) => {
                            if (tab.name === targetName) {
                                let nextTab = tabs[index + 1] || tabs[index - 1];
                                if (nextTab) {
                                    activeName = nextTab.name;
                                }
                            }
                        });
                    }

                    this.editableTabsValue = activeName;
                    this.editableTabs = tabs.filter(tab => tab.name !== targetName);
                }
            }
        }
    })
</script>
<style>
    .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        bottom: 0px;
        position: absolute;
        left: 200px;
        right: 0px;
        padding-top: 5px;
    }

    .el-header {
        line-height: 60px;
        height: 60px;
        top: 0px;
        left: 0px;
        right: 0px;
        color: #333;
        background-color: #B3C0D1;
        text-align: right;
    }

    .el-main-header {
        line-height: 60px;
        height: 60px;
        top: 0px;
        left: 200px;
        right: 0px;
        color: #333;
        background-color: #D3DCE6;
        text-align: right;
    }
    .el-tabs {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        top: 60px;
        left: 200px;
        right: 0px;
        position: absolute;
        bottom: 30px;
    }
    .el-main, {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        top: 120px;
        left: 200px;
        right: 0px;
        position: absolute;
        bottom: 30px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-aside {
        z-index: 100;
        background-color: #D3DCE6;
        color: #333;
        left: 0px;
        text-align: left;
        position: absolute;
        bottom: 0px;
        top: 60px;
    }

    .el-container {
        width: 100%;
        height: 100%;
    }

</style>

</body>
</html>